<template>
  <div class="input-area">
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入新的待办事项" />
    <button @click="addTodo">添加</button>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'

const newTodo = ref('')
const emits = defineEmits(['add'])

function addTodo() {
  const text = newTodo.value.trim()
  if (text) {
    emits('add', text)
    newTodo.value = ''
  }
}
</script>

<style scoped>
.input-area {
  display: flex;
  margin-bottom: 20px;
}

.input-area input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ffb6b9;
  border-radius: 8px;
  transition: border-color 0.3s;
}

.input-area input:focus {
  border-color: #ff6ec7;
  outline: none;
}

.input-area button {
  margin-left: 10px;
  padding: 10px 20px;
  background-color: #ff6ec7;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.input-area button:hover {
  background-color: #ff4fa3;
}
</style>